<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计算机与信息工程学院 - 师资与招生</title>
    <style>
        /* 样式优化：表格边框合并、表单排版整齐 */
        table { width: 100%; border-collapse: collapse; margin: 30px 0; }
        th, td { border: 1px solid #ddd; padding: 12px; text-align: center; }
        th { background-color: #3498db; color: white; }
        tr:nth-child(even) { background-color: #f8f9fa; } /* 偶数行背景色，提升表格可读性 */
        
        .form-container { max-width: 600px; margin: 40px auto; padding: 20px; border: 1px solid #ddd; border-radius: 8px; }
        .form-group { margin-bottom: 15px; }
        label { display: inline-block; width: 120px; text-align: right; margin-right: 10px; font-weight: bold; }
        input, select, textarea { padding: 8px; width: 300px; border: 1px solid #ddd; border-radius: 4px; }
        button { margin-left: 135px; padding: 10px 25px; background-color: #2ecc71; color: white; border: none; border-radius: 4px; cursor: pointer; }
        button:hover { background-color: #27ae60; } /* 按钮 hover 效果，提升交互体验 */
        .section-title { color: #2c3e50; text-align: center; margin-top: 50px; }
    </style>
</head>
<body>
    <div style="max-width: 1200px; margin: 0 auto; padding: 0 20px;">
        <!-- 1. 表格标签应用1：学院专业设置表（结构化展示专业名称、学制、核心课程等数据） -->
        <h2 class="section-title">学院专业设置</h2>
        <table>
            <thead>
                <tr> <!-- 表格行 -->
                    <th>专业名称</th> <!-- 表头单元格（加粗居中） -->
                    <th>层次</th>
                    <th>学制</th>
                    <th>核心课程</th>
                    <th>就业方向</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>计算机科学与技术</td>
                    <td>本科</td>
                    <td>4年</td>
                    <td>数据结构、操作系统、计算机网络、人工智能</td>
                    <td>软件开发、算法工程师、网络工程师</td>
                </tr>
                <tr>
                    <td>人工智能</td>
                    <td>本科</td>
                    <td>4年</td>
                    <td>机器学习、深度学习、计算机视觉、自然语言处理</td>
                    <td>AI工程师、机器学习工程师、智能系统开发</td>
                </tr>
                <tr>
                    <td>软件工程</td>
                    <td>本科</td>
                    <td>4年</td>
                    <td>软件工程概论、软件测试、移动应用开发、云计算</td>
                    <td>软件开发者、测试工程师、云计算运维</td>
                </tr>
                <tr>
                    <td>计算机应用技术</td>
                    <td>专科</td>
                    <td>3年</td>
                    <td>Python编程、Web前端开发、数据库应用</td>
                    <td>Web开发、数据库管理员、IT运维</td>
                </tr>
            </tbody>
        </table>

        <!-- 表格标签应用2：重点师资表（展示教师姓名、职称、研究方向等） -->
        <h2 class="section-title">重点师资队伍</h2>
        <table>
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>职称</th>
                    <th>学历</th>
                    <th>研究方向</th>
                    <th>主讲课程</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>张教授</td>
                    <td>教授</td>
                    <td>博士</td>
                    <td>人工智能、计算机视觉</td>
                    <td>深度学习、计算机视觉</td>
                </tr>
                <tr>
                    <td>李副教授</td>
                    <td>副教授</td>
                    <td>博士</td>
                    <td>软件工程、移动应用开发</td>
                    <td>软件工程、Android开发</td>
                </tr>
                <tr>
                    <td>王老师</td>
                    <td>讲师</td>
                    <td>硕士</td>
                    <td>Web前端开发、云计算</td>
                    <td>HTML/CSS/JS、云计算技术</td>
                </tr>
            </tbody>
        </table>

        <!-- 2. 表单标签应用：招生咨询表单（收集用户姓名、咨询类型、问题等信息） -->
        <h2 class="section-title">招生咨询表单</h2>
        <div class="form-container">
            <!-- form：表单容器，action指定提交地址（#表示暂不提交），method指定提交方式（POST更安全，避免数据暴露在URL中） -->
            <form action="#" method="POST">
                <!-- 文本输入框：收集姓名 -->
                <div class="form-group">
                    <label for="name">姓名：</label>
                    <input type="text" id="name" name="username" required placeholder="请输入您的姓名">
                    <!-- required：HTML5自带验证，必填项未填则阻止提交；placeholder：输入提示文本 -->